<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">{{blockNumber}}</div>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios@0.25.0/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@3"></script>
    <script src="https://cdn.jsdelivr.net/npm/ethers@5.5.4/dist/ethers.umd.min.js"></script>
    <script>
        // document.getElementById('connectButton', connect);

        // function connect() {
        //     ethereum
        //         .request({ method: 'eth_requestAccounts' })
        //         // .then(handleAccountsChanged)
        //         .catch((error) => {
        //             if (error.code === 4001) {
        //                 // EIP-1193 userRejectedRequest error
        //                 console.log('Please connect to MetaMask.');
        //             } else {
        //                 console.error(error);
        //             }
        //         });
        // }

        var provider = new ethers.providers.Web3Provider(ethereum);
        conf = {
            data() {
                return {
                    blockNumber: 0,
                    networkId: 0,
                }
            },
            created() {
                ethereum.on('chainChanged', networkId => {
                    console.log('chainChanged');
                    this.networkId = networkId;
                    ethereum.request({ method: 'eth_blockNumber' })
                        .then(x => {
                            this.blockNumber = parseInt(x, 16);
                        })
                });
                provider.on('block', x => {
                    console.log('block');
                    this.blockNumber = x;
                });
            },
        }
        var app = Vue.createApp(conf).mount('#app')
    </script>
</body>

</html>